function IntegerAbbr(x) {
  if (x < 999) return x.toString();
  else {
    var str = (x / 1000).toFixed(1);
    if (str.search('.0') == -1) return str + 'k';
    else {
      return str.substr(0, str.length - 2) + 'k';
    }
  }
}

function getLabelsInt(list, field) {
  var result = [];
  for (var i = 0; i < list.length; ++i) {
    result.push(list[i][field] % 100);
  }
  return result;
}

function getLabels(list, field) {
  var result = [];
  for (var i = 0; i < list.length; ++i) {
    result.push(list[i][field]);
  }
  return result;
}

function getColumn(list, col) {
  var result = [];
  for (var i = 0; i < list.length; ++i) {
    result.push(list[i]['data'][col]);
  }
  return result;
}

function getViews(list) {
  return getColumn(list, 0);
}

function getDownloads(list) {
  return getColumn(list, 1);
}

function getTemplateCount(list) {
  return getColumn(list, 2);
}

function getDataCount(list) {
  return getColumn(list, 3);
}

function setGlobal(list) {
  $('#card-views').text(IntegerAbbr(list[0]));
  $('#card-downloads').text(IntegerAbbr(list[1]));
  $('#card-template-count').text(IntegerAbbr(list[2]));
  $('#card-data-count').text(IntegerAbbr(list[3]));
}

function setTrend(list) {
  var options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

  var vdl = {
    labels: getLabelsInt(list, 'date'),
    datasets: [
      {
        label: gettext('Views'),
        fill: false,
        backgroundColor: "#bf1124",
        borderColor: "#bf1124",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "343d3e",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: getViews(list),
        spanGaps: false
      },
      {
        label: gettext("Downloads"),
        fill: false,
        backgroundColor: "#1587a8",
        borderColor: "#1587a8",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#1587a8",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: getDownloads(list),
        spanGaps: false
      }
    ]
  };

  var dtc = {
    labels: getLabelsInt(list, 'date'),
    datasets: [
      {
        label: gettext('Data Count'),
        fill: false,
        backgroundColor: "#bf1124",
        borderColor: "#bf1124",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "343d3e",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: getDataCount(list),
        spanGaps: false
      },
      {
        label: gettext("Template Count"),
        fill: false,
        backgroundColor: "#1587a8",
        borderColor: "#1587a8",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#1587a8",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: getTemplateCount(list),
        spanGaps: false
      }
    ]
  };
  if($.c1 != null) $.c1.destroy();
  if($.c2 != null) $.c2.destroy();

  $.c1 = new Chart(document.getElementById("trendOfView"), {type: 'radar', data: vdl, options: options});
  $.c2 = new Chart(document.getElementById("trendOfCount"), {type: 'radar', data: dtc, options: options});
}

function setClass(list) {
  if (list === null || list.length === 0) {
    $('#rowDatabase').hide();
    $('#rowDatabaseTitle').hide();
  }
  else {
    $('#rowDatabase').show();
    $('#rowDatabaseTitle').show();
    var options = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }],
        xAxes:[{
          ticks: {
            autoSkip: false
          }
        }]
      }
    };

    var vdl = {
      labels: getLabels(list, 'name'),
      datasets: [
        {
          label: gettext('Views'),
          fill: false,
          backgroundColor: "#bf1124",
          borderColor: "#bf1124",
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: "rgba(75,192,192,1)",
          pointBackgroundColor: "#fff",
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "343d3e",
          pointHoverBorderColor: "rgba(220,220,220,1)",
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: getViews(list),
          spanGaps: false
        },
        {
          label: gettext('Downloads'),
          fill: false,
          backgroundColor: "#1587a8",
          borderColor: "#1587a8",
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: "rgba(75,192,192,1)",
          pointBackgroundColor: "#fff",
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "#1587a8",
          pointHoverBorderColor: "rgba(220,220,220,1)",
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: getDownloads(list),
          spanGaps: false
        }
      ]
    };

    var dtc = {
      labels: getLabels(list, 'name'),
      datasets: [
        {
          label: gettext('Data Count'),
          fill: false,
          backgroundColor: "#bf1124",
          borderColor: "#bf1124",
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: "rgba(75,192,192,1)",
          pointBackgroundColor: "#fff",
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "343d3e",
          pointHoverBorderColor: "rgba(220,220,220,1)",
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: getDataCount(list),
          spanGaps: false
        },
        {
          label: gettext("Template Count"),
          fill: false,
          backgroundColor: "#1587a8",
          borderColor: "#1587a8",
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: "rgba(75,192,192,1)",
          pointBackgroundColor: "#fff",
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "#1587a8",
          pointHoverBorderColor: "rgba(220,220,220,1)",
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: getTemplateCount(list),
          spanGaps: false
        }
      ]
    };
    if($.c3 != null) $.c3.destroy();
    if($.c4 != null) $.c4.destroy();

    $.c3 = new Chart(document.getElementById("dbView"), {type: 'bar', data: vdl, options: options});
    $.c4 = new Chart(document.getElementById("dbCount"), {type: 'bar', data: dtc, options: options});
  }
}

function onQuerySuccess(data, status, xhr) {
  setGlobal(data.data['global']);
  //fsc：190618
  // setTrend(data.data['trend']);
  setClass(data.data['class']);
}

$(function () {
  //为了不修改模板而作出的预处理：
  $('.navbar-expand-lg').addClass('navbar-fixed-top');
  $('footer').hide();

  $.onNavClicked(function (id, name) {
    $.get(Urls.resolve('analysis_api_v1:query_class', {cid: id}), '', onQuerySuccess);
  });
  $.get(Urls.resolve('analysis_api_v1:index'), '', onQuerySuccess);
});